<template>
  <div class="aiseoHomePage" >
    <div class="popup-wrapper">
      <div style="color: aliceblue;">
        <img src="/assets/images/homepage/img／aiseo／login／slogan@2x.png" alt />
      </div>
      <div class="popup-container">
        <div style="display: flex;align-items: inherit;">
          <div style="font-size: 32px;font-weight: bold;">{{codeTitle}}</div>
        </div>
        <div style="font-size: 16px;margin-top: 14px;color: #7B7C80;">{{codexiu}}</div>
        <div class="Slider">
          <div
            style="width: 50%; text-align: center; color: aliceblue;"
            :class="codeType==1 ? 'codeType' : ''"
            @click="clickType(1)"
          >
            <img
              v-if="codeType !=1 "
              src="/assets/image/logo/icon／slidebtn／sms／grey@2x.png"
              alt
              style="width:32px; height: 32px;  z-index: 99;line-height: 32px;"
            />
            <img
              v-if="codeType==1  "
              src="/assets/image/logo/icon／slidebtn／sms／redblack@2x.png"
              alt
              style="width:32px; height: 32px;  z-index: 99;line-height: 32px;"
            />
          </div>
          <div
            style="width: 50%; text-align: center; color: aliceblue;"
            :class="codeType==2 ||codeType==3  ? 'codeType' : ''"
            @click="clickType(2)"
          >
            <img
              v-if="codeType==2 ||codeType==3"
              src="/assets/image/logo/icon／slidebtn／lock／redblack@2x.png"
              alt
              style="width: 32px; height:32px;  z-index: 99;line-height: 32px;"
            />
            <img
              v-if="codeType==1"
              src="/assets/image/logo/icon／slidebtn／lock／grey@2x (1).png"
              alt
              style="width: 32px; height:32px;  z-index: 99;line-height: 32px;"
            />
          </div>
        </div>
        <div v-if="codeType==1">
          <div style="margin-top: 34px;">
            <div style="width: 349px;display: flex;">
              <div style="width: 40px;">
                <img src="/assets/images/homepage/icon.png" alt style="width: 24px;height:24px ;" />
              </div>
              <div>
                <div style="font-size: 18px;font-weight: bold;">手机号</div>
                <div class="iphoneInput" style>
                  <input
                    type="text"
                    style="border: none;"
                    placeholder="请输入您的手机号"
                    v-model="loginForm.phone"
                    @input="checkPhoneNumber"
                    @blur="
									   () => {
									     validatePhone();
									   }
									 "
                  />
                </div>
                <div v-if="phonecode==false" style="color: #B3242F;margin: 5px 0;position: absolute;">请输入正确的手机号</div>
              </div>
            </div>
          </div>
          <div style="margin-top: 34px;">
            <div style="width: 349px;display: flex;">
              <div style="width: 40px;">
                <img src="/assets/images/homepage/icon1.png" alt style="width: 24px;height:24px ;" />
              </div>
              <div>
                <div style="display: flex;">
                  <div style="font-size: 18px;font-weight: bold;">验证码</div>
                  <div></div>
                </div>
                <div class="iphoneInput" style="justify-content: space-between;">
                  <input
                    type="text"
                    style="border: none;width: 50%;"
                    placeholder="请输入验证码"
                    v-model="loginForm.code"
                  />
                  <div
                    v-show="!phoneValid"
                    style="color: #C8C9CC;font-size: 14px;"
                  >>{{codeyan}}<</div>
                  <div
                    v-show="phoneValid"
                    style="color: #2E2F33;font-size: 14px;cursor: pointer;"
                    @click="getCode()"
                  >>{{codeyan}}<</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="codeType==2">
          <div style="margin-top: 34px;">
            <div style="width: 349px;display: flex;">
              <div style="width: 40px;">
                <img src="/assets/images/homepage/icon.png" alt style="width: 24px;height:24px ;" />
              </div>
              <div>
                <div style="font-size: 18px;font-weight: bold;">手机号</div>
                <div class="iphoneInput" style>
                  <input
                    type="text"
                    style="border: none;"
                    placeholder="请输入您的手机号"
                    v-model="loginForm.phone"
                    @input="checkPhoneNumber"
                    @blur="
									  () => {
									    validatePhone();
									  }
									"
                  />
                </div>
                <div v-if="phonecode==false" style="color: #B3242F;margin: 5px 0;position: absolute;">请输入正确的手机号</div>
              </div>
            </div>
          </div>
          <div style="margin-top: 34px;">
            <div style="width: 349px;display: flex;">
              <div style="width: 40px;">
                <img src="/assets/images/homepage/icon22.png" alt style="width: 24px;height:24px ;" />
              </div>
              <div>
                <div style="display: flex;">
                  <div style="font-size: 18px;font-weight: bold;">密码</div>
                  <div style="color: #808080;cursor: pointer;" @click="forgetthepassword()">*忘记密码?</div>
                </div>
                <div class="iphoneInput" style="justify-content: space-between;">
                  <input
                    :type="isPasswordVisible ? 'text' : 'password'"
                    style="border: none;width: 60%;"
                    placeholder="请输入密码"
                    v-model="loginForm.password"
                    @blur="
									   () => {
									     validatepassword();
									   }
									 "
                  />
                  <img
                    src="/assets/images/homepage/rightelements.png"
                    alt
                    style="width: 20px;height:20px;cursor: pointer;"
                    @click="togglePasswordVisibility()"
                  />
                </div>
                <div v-if="password==false" style="color: #B3242F;margin: 5px 0;">请输入密码</div>

                <div
                  style="padding: 16px 0;cursor: pointer;"
                  @mouseenter="remberMouseEnter"
                  @mouseleave="remberMouseLeave"
                  @click="remberzhu()"
                >
                  <img
                    v-show="Remember==1"
                    src="/assets/image/logo/button／login／rememberpwd／normal@2x.png"
                    alt
                    style="width: 96px;height: 27px;"
                  />
                  <img
                    v-show="Remember==2"
                    src="/assets/image/logo/button／login／rememberpwd／hover@2x.png"
                    alt
                    style="width: 96px;height: 27px;"
                  />
                  <img
                    v-show="Remember==3"
                    src="/assets/image/logo/button／login／rememberpwd／selected@2x.png"
                    alt
                    style="width: 96px;height: 27px;"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="codeType==3">
          <div style="margin-top: 34px;">
            <div style="width: 349px;display: flex;">
              <div style="width: 40px;">
                <img src="/assets/images/homepage/icon.png" alt style="width: 24px;height:24px ;" />
              </div>
              <div>
                <div style="font-size: 18px;font-weight: bold;">手机号</div>
                <div class="iphoneInput" style>
                  <input
                    type="text"
                    style="border: none;"
                    placeholder="请输入您的手机号"
                    v-model="loginForm.phone"
                    @input="checkPhoneNumber"
                    @blur="
									   () => {
									     validatePhone();
									   }
									 "
                  />
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top: 34px;">
            <div style="width: 349px;display: flex;">
              <div style="width: 40px;">
                <img src="/assets/images/homepage/icon1.png" alt style="width: 24px;height:24px ;" />
              </div>
              <div>
                <div style="display: flex;">
                  <div style="font-size: 18px;font-weight: bold;">验证码</div>
                  <div></div>
                </div>
                <div class="iphoneInput" style="justify-content: space-between;">
                  <input
                    type="text"
                    style="border: none;width: 50%;"
                    placeholder="请输入验证码"
                    v-model="loginForm.code"
                  />
                  <div
                    v-show="!phoneValid"
                    style="color: #C8C9CC;font-size: 14px;"
                  >>{{codeyan}}<</div>
                  <div
                    v-show="phoneValid"
                    style="color: #2E2F33;font-size: 14px;cursor: pointer;"
                    @click="getCode()"
                  >>{{codeyan}}<</div>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top: 34px;">
            <div style="width: 349px;display: flex;">
              <div style="width: 40px;">
                <img src="/assets/images/homepage/icon22.png" alt style="width: 24px;height:24px ;" />
              </div>
              <div>
                <div style="display: flex;">
                  <div style="font-size: 18px;font-weight: bold;">密码</div>
                </div>
                <div class="iphoneInput" style="justify-content: space-between;">
                  <input
                    :type="isPasswordVisible ? 'text' : 'password'"
                    style="border: none;width: 60%;"
                    placeholder="请输入密码"
                    v-model="loginForm.password"
                  />
                  <img
                    src="/assets/images/homepage/rightelements.png"
                    alt
                    style="width: 20px;height:20px;cursor: pointer;"
                    @click="togglePasswordVisibility()"
                  />
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top: 34px;">
            <div style="width: 349px;display: flex;">
              <div style="width: 40px;">
                <img src="/assets/images/homepage/icon22.png" alt style="width: 24px;height:24px ;" />
              </div>
              <div>
                <div style="display: flex;">
                  <div style="font-size: 18px;font-weight: bold;">确认密码</div>
                </div>
                <div class="iphoneInput" style="justify-content: space-between;">
                  <input
                    :type="isPasswordVisible2 ? 'text' : 'password'"
                    style="border: none;width: 60%;"
                    placeholder="请确认密码"
                    v-model="loginForm.surecode"
                  />
                  <img
                    @click="togglePasswordVisibility2()"
                    src="/assets/images/homepage/rightelements.png"
                    alt
                    style="width: 20px;height:20px;cursor: pointer;"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          style="display: flex;align-items: center;margin-top: 38px; margin-left: 12px;"
          @click="goxieyi()"
          v-if="codeType!=3"
        >
          <img
            v-if="codexieyi==true"
            src="/assets/image/logo/button／login／checkbox／default@2x.png"
            alt
            style="width: 16px;height: 16px; cursor: pointer;"
          />
          <img
            v-if="codexieyi==false"
            src="/assets/image/logo/button／login／checkbox／checked@2x.png"
            alt
            style="width: 16px;height: 16px;"
          />
          <div style="margin-left: 5px;font-size: 14px; cursor: pointer;">
            我已阅读并同意
            <a
              target="_blank"
              href="./pcAgreement"
              style="color: #2E3033;margin-left:3px;font-weight: bold;font-size: 14px;"
            >《AISEO服务协议》</a>
          </div>
        </div>
        <div style="display: flex;justify-content: flex-end;margin-top: 48px;">
          <div
            style
            class="gologin"
            @click="goLogin()"
            :class="{ hover:(img1== img2) && phoneValid, activeLogin: phoneValid }"
            @mouseenter="handleMouseEnter"
            @mouseleave="handleMouseLeave"
          >
            <div class="img">
              <img v-show="phoneValid" :src="img1" alt style="width: 40px;height: 27px;" />
              <img v-show="!phoneValid" :src="img3" alt style="width: 40px;height: 27px;" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import customerSeviceButton from "@/components/customerService/customerSeviceButton.vue";
import { code, login, getUsrInfo,ChangePassword } from "@/utils/api/customerService/index.ts";
import EventBus from "@/utils/eventBus.js";
import { ref, reactive, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "@/store/index";
const store = useStore();
const router = useRouter();
const codeType = ref(1);
const loginForm = reactive({
  phone: "",
  password: "",
  surecode:"",
  code: ""
});
const codeTitle = ref("验证码登录");
const codeyan = ref("获取验证码");
const codexiu = ref("新号码登入时将自动为您完成注册.");
const Remember = ref(1);
if (process.client) {
  loginForm.password = localStorage.getItem("password");
  if (localStorage.getItem("password")) {
    Remember.value = 3;
  }
}
// 登录hover
const phoneValid = ref(false);
import phoneImageBlack from "/assets/image/logo/icon／nextArraw／black@2x.png"; // 导入黑色图片
import phoneImageWhite from "/assets/image/logo/icon／nextArraw／white@2x.png"; // 导入白色图片
import greyPhoneImageSrc from "/assets/image/logo/icon／nextArraw／grey@2x.png"; // 导入灰色图片
const img1 = ref(phoneImageBlack);
const img2 = ref(phoneImageWhite);
const img3 = ref(greyPhoneImageSrc);
const img4 = ref(phoneImageBlack);
const handleMouseEnter = () => {
  img1.value = img2.value;
};

const handleMouseLeave = () => {
  img1.value = img4.value; // 恢复默认图片路径
};
const remberMouseEnter = () => {
  if (Remember.value != 3) Remember.value = 2;
};
const checkPhoneNumber = () => {
  const phoneRegex = /^\d{11}$/;
  phoneValid.value = phoneRegex.test(loginForm.phone);
};
const remberMouseLeave = () => {
  if (Remember.value != 3) Remember.value = 1;
};
const remberzhu = () => {
  if (Remember.value === 1) {
    Remember.value = 3;
    localStorage.setItem("password", loginForm.password);
  } else if (Remember.value === 2) {
    Remember.value = 3;
    localStorage.setItem("password", loginForm.password);
  } else {
    Remember.value = 2;
    localStorage.removeItem("password");
  }
};
const codexieyi = ref(true);
let getCodeisWaiting = ref(false);
const getCode = (e) => {
	// 避免重复点击
	if (getCodeisWaiting.value) return;
	// 校验手机号码
	if (!(/^1[0-9]{10}$/.test(loginForm.phone))) {
		EventBus.emit("openToastBox", ["请填写正确的手机号"]);
		return false;
	}
	codeyan.value = '发送中'
	getCodeisWaiting.value = true;
	sendCode(loginForm.phone)
}
let Timer = e => {};
const sendCode = e => {
  code({
    mobile: e
  }).then(res => {
		const resData = JSON.parse(res.data.value);
		if (resData.code == 200) {
			EventBus.emit("openToastBox", ["验证码发送成功！"]);
		} else {
			EventBus.emit("openToastBox", ["验证码发送太频繁！"]);
		}
  });
  setTimer();
};
const setTimer = e => {
  let holdTime = ref(59);
  codeyan.value = "重新获取(60)";
  Timer = setInterval(() => {
    if (holdTime.value <= 0) {
      getCodeisWaiting.value = false;
      codeyan.value = "获取验证码";
      clearInterval(Timer);
      return;
    }
    codeyan.value = "重新获取(" + holdTime.value + ")";
    holdTime.value--;
  }, 1000);
};
let phonecode = ref(true);
const validatePhone = () => {
  const phoneRegex = /^1[3-9]\d{9}$/;
  if (!phoneRegex.test(loginForm.phone)) {
    phonecode.value = false;
  } else {
    phonecode.value = true;
  }
};
let password = ref(true);
const validatepassword = () => {
  if (loginForm.password == "") {
    password.value = false;
  } else {
    password.value = true;
  }
};
const clickType = e => {
  codeType.value = e;
  loginForm.phone = "";
  loginForm.surecode = "";
  if (!localStorage.getItem("password")) {
    loginForm.password = "";
  }
  loginForm.code = "";
  if (codeType.value == 2) {
    (codeTitle.value = "密码登录"),
      (codexiu.value = "若是新用户注册, 请使用验证码方式登入.");
  } else if (codeType.value == 1) {
    (codeTitle.value = "验证码登录"),
      (codexiu.value = "新号码登入时将自动为您完成注册.");
  }
};
const isPasswordVisible = ref(false);
const isPasswordVisible2 = ref(false);

const togglePasswordVisibility = () => {
  isPasswordVisible.value = !isPasswordVisible.value;
};
const togglePasswordVisibility2 = () => {
  isPasswordVisible2.value = !isPasswordVisible2.value;
};
const forgetthepassword = () => {
  codeType.value = 3;
  if (codeType.value == 3) {
    (codeTitle.value = "修改密码"),
      (codexiu.value = "在此页面修改或重置您的登录密码.");
  } else {
    codexiu.value = "新号码登入时将自动为您完成注册.";
  }
};
// 登录
const goLogin = (e) => {
  if(!phoneValid.value) return
	if (codexieyi.value == true && codeType.value != 3) {
		EventBus.emit("openToastBox", ['请勾选AISEO服务协议']);
		return;
	}
	if (loginForm.phone == '') {
		EventBus.emit("openToastBox", ['请输入手机号']);
		return;
	}
	if (codeType.value == 1 && loginForm.code == '') {
		EventBus.emit("openToastBox", ['请输入验证码']);
		return;
	}
	if (codeType.value == 2 && loginForm.password == '') {
		EventBus.emit("openToastBox", ['请输入密码']);
		return;
	}
	let data = {
		mobile: loginForm.phone,
	}
	if (codeType.value == 1) data.mobile_code = loginForm.code;
	if (codeType.value == 2) data.password = loginForm.password;
	if (codeType.value == 3){
		if (loginForm.password != loginForm.surecode ) {
			EventBus.emit("openToastBox", ['两次密码输入不一致']);
			return;
		}
		if(loginForm.code == '') return EventBus.emit("openToastBox", ['请输入验证码']);
		if(loginForm.password == '') return EventBus.emit("openToastBox", ['请输入密码']);
		if(loginForm.phone == '') return EventBus.emit("openToastBox", ['请输入手机号']);
		 data.password = loginForm.password;
		data.mobile_code = loginForm.code
         ChangePassword(data).then((res) => {
				const resData = JSON.parse(res.data.value);
        if(resData.code == 400){
           EventBus.emit("openToastBox", [resData.message])
        }else if(resData.code == 200){
            EventBus.emit("openToastBox", ['您已修改成功，请重新登录'])
            codeType.value = 2
        }
		 })

	};
	if(codeType.value!=3){
       	login(data).then((res) => {
		const resData = JSON.parse(res.data.value);
		if (resData.code == 200) {
			if (resData.result.token) {
				localStorage.setItem('aiseo-token-info', resData.result.token);
				EventBus.emit("openToastBox", ['登录成功']);
				router.push('/');
				// 获取用户信息
				getUsrInfo().then((res) => {
					const resData = JSON.parse(res.data.value);
					if (resData &&resData.code == 200) {
						store.setUserInfo(resData.result);
						localStorage.setItem('aiseo-user-info', JSON.stringify(resData.result));		
					}
				});
			}
		} else {
			EventBus.emit("openToastBox", [resData.message]);
		}
	});
	}
}
const goxieyi = () => {
  codexieyi.value = !codexieyi.value;
};
</script>
<style lang="scss" scoped>
.aiseoHomePage {
  display: flex;
  align-items: center;
  height: 100%;
  background-image: url("@/assets/image/logo/20240619172641.webp");
  background-size: cover;
  background-repeat: no-repeat;
}
.popup-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: space-around;
}

.popup-container {
  width: 443px;
  // height: 720px;
  padding: 68px 48px;
  border-radius: 24px;
  background-color: #fff;
  box-sizing: border-box;
}

.Slider {
  display: flex;
  align-items: center;
  background: #e4e4e6;
  width: 120px;
  height: 44px;
  border-radius: 22px;
  margin-top: 14px;
  cursor: pointer;
}

.codeType {
  margin: 6px;
  border-radius: 22px;
  background-color: #f3f3f5;
  z-index: 20;
  cursor: pointer;
}

.iphoneInput {
  font-size: 16px;
  color: #47494d;
  height: 32px;
  border-bottom: 1px solid #b3b3b3;
  width: 300px;
  display: flex;
  margin-top: 10px;
  align-items: center;
}
.gologin {
  text-align: center;
  border: 3px solid #e4e4e6;
  border-radius: 30px;
  padding: 2px;
  width: 100px;
  height: 51px;
  line-height: 51px;
  cursor: pointer;
  transition: width 0.2s linear;
  .img {
    transition: width 0.2s linear;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.activeLogin{
  border-color: #17171A;
}
.hover {
  width: 120px;
  text-align: center;
  border: 3px solid #e62e3d;
  border-radius: 30px;
  padding: 2px;
  cursor: pointer;
  .img {
    transition: 0.2s linear;
    background: #e62e3d;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    display: flex;
    justify-content: center;
  }
}
</style>